<template>

    <!-- 顶部导航 -->
    <van-nav-bar title="地址管理" left-text="返回" left-arrow @click-left="$router.back()" />
    <!-- 地址列表 -->
    <van-address-list v-model="chosenAddressId" :list="addresslist" default-tag-text="默认" @add="onAdd" @edit="onEdit" />

    <!-- 弹出层控制地址编辑的显示和隐藏 -->
    <van-popup v-model:show="show" position="bottom">
        {{ type }}
        <van-address-edit :area-list="areaList" :address-info="addressInfo" show-delete show-set-default
            :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete" />
    </van-popup>

</template>


<script setup lang="ts">

const chosenAddressId = ref('1');




// console.log(areaList)

// 新增 
const show = ref(false)

// 你现在是要新建地址还是要编辑地址
const type = ref('add')

// const userid = localStorage.getItem('userId')
let userid = localStorage.getItem('userId')
const onAdd = () => {
    show.value = true


}

const addressInfo = reactive({
    name: '',
    tel: '',
    address: '',
    addressDetail: '',
    province: '',
    city: '',
    county: '',
    addressid: '',
})
const onEdit = (item, index) => {
    // console.log(item.addressid);
    //   新的编辑后的内容 如何获取
    show.value = true
    type.value = 'edit'

    //  内容填充 
    // item 是之前的内容

    addressInfo.name = item.name
    addressInfo.tel = item.tel
    addressInfo.address = item.address
    addressInfo.addressDetail = item.province + item.city + item.county
    addressInfo.province = item.province
    addressInfo.city = item.city
    addressInfo.county = item.county
    addressInfo.addressid = item.addressid
}


//  增删改查 

//  1  实现 地址列表渲染 
onMounted(() => {
    showAddressList()
})





//  新增完地址保存 

const onSave = async (info: any) => {
    console.log(info);
    info.userid = userid
    //表示新增
    if (type.value == 'add') {

        console.log(info)

        info.userid = userid

        let res = await getAddAddress(info)

        console.log(res)

    } else {   // 表示编辑 
        // info
        let res = await getUpdateAddress(info)

        console.log(res)
        // 重置 type 
        type.value = 'add'
    }
    //   关闭弹框
    show.value = false
    showAddressList()


}


// 删除逻辑 

const onDelete = async (info: any) => {

    console.log(info.addressid)

    let res = await getDeleteAddress({ addressid: info.addressid })

    show.value = false
    showAddressList()

}



// 地址信息对象要适应地址列表显示还要适应底部弹出的编辑应该
/* 
   // 前端用户填写地址以后，我要把数据变成下面的格式 
   {
      id:'',
      name:'',
      tel:'',
      address:'',
      province:'',
      city:'',
      county:'',
      isDefault:true,
      addressDetail:""
   }
   // 后端返回的地址数据
   {
      name:'',
      tel:'',
      city:'',
      county:'',
      province:'',
      isDefault:'',
      addressDetail:"",
      addressid:'',
      userid:''
   }
*/



// 书写一个方法，把对象里面的属性丰富一下
const formatAddress = (info: any) => {
    if (!info.address) {

        let province = info.province ? info.province : '默认-广东'
        let city = info.city ? info.city : '默认-深圳'

        let county = info.county ? info.county : '默认-宝安区'
        let addressDetail = info.addressDetail ? info.addressDetail : '默认-西部硅谷'

        info.address = province + city + county + addressDetail
    }

    if (!info.id) {
        info.id = info.addressid
    }



    return info;
}


</script>

<style scoped>

</style>